<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
</head>
<body>

<div id="app">
    <!--如果在使用中使用查询字符串，不需要修改path的属性-->
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link to="/register/12/ls">注册</router-link>
    <router-view></router-view>
</div>
<script>
var login={
  template:"<h1>登录---{{$route.query.id}}</h1>",
  data(){
    return {
      msg:"123"
    }
  },
  created(){//DOM还没有生成
    //组件的生命周期钩子函数
    // $route  信息数据
    // $router  功能函数
    // console.log(this.$route)
    // console.log(this.$route.query.id)
  },
  mounted(){//  数据已经装载上去了，dom已经生成

  }
}
var register={
  template:"<h1>注册--{{$route.params.id}}--{{$route.params.name}}</h1>",
  data(){
    return {
      msg:"223"
    }
  },
  created(){
    //组件的生命周期钩子函数
    // console.log(this.$route)
    // console.log(this.$route)
  }
}
var router=new VueRouter({
  routes:[
      // 查询字符串  不用改
    {path:"/login",component:login},
    {path:"/register/:id/:name",component:register},
  ]
})
var vm=new Vue({
  el:"#app",
  data:{},
  methods:{},
  router:router
  // router
})
</script>

</body>
</html>